<div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

      <div id="introduction" class="section scrollspy">
        <p class="caption">
          Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant
          to the user.
          </span>
          <ul class="collapsible collapsible-accordion">
            <li>
              <div class="collapsible-header">
                <i class="material-icons">filter_drama</i>First</div>
              <div class="collapsible-body">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                  ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">place</i>Second</div>
              <div class="collapsible-body">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.</span>
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">whatshot</i>Third</div>
              <div class="collapsible-body">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.</span>
              </div>
            </li>
          </ul>
          <br>

          <pre><code class="language-markup">
  &lt;ul class="collapsible">
    &lt;li>
      &lt;div class="collapsible-header">&lt;i class="material-icons">filter_drama&lt;/i>First&lt;/div>
      &lt;div class="collapsible-body">&lt;span>Lorem ipsum dolor sit amet.&lt;/span>&lt;/div>
    &lt;/li>
    &lt;li>
      &lt;div class="collapsible-header">&lt;i class="material-icons">place&lt;/i>Second&lt;/div>
      &lt;div class="collapsible-body">&lt;span>Lorem ipsum dolor sit amet.&lt;/span>&lt;/div>
    &lt;/li>
    &lt;li>
      &lt;div class="collapsible-header">&lt;i class="material-icons">whatshot&lt;/i>Third&lt;/div>
      &lt;div class="collapsible-body">&lt;span>Lorem ipsum dolor sit amet.&lt;/span>&lt;/div>
    &lt;/li>
  &lt;/ul>
        </code></pre>
      </div>

      <div id="intialization" class="section scrollspy">
        <h3 class="header">Initialization</h3>
        <pre><code class="language-javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });
        </code></pre>

        <br>
        <br>
        <h5>Preselected Section</h5>
        <span>If you want a collapsible with a preopened section just add the <code class="language-markup">active</code> class to the <code class="language-markup">li</code> wrapping the collapsible-header. </span>
        <ul class="collapsible collapsible-accordion">
          <li>
            <div class="collapsible-header">
              <i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body">
              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                ut aliquip ex ea commodo consequat.</span>
            </div>
          </li>
          <li class="active">
            <div class="collapsible-header">
              <i class="material-icons">place</i>Second</div>
            <div class="collapsible-body">
              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </span>
            </div>
          </li>
          <li>
            <div class="collapsible-header">
              <i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body">
              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </span>
            </div>
          </li>
        </ul>
        <pre><code class="language-markup">
  &lt;li class="active">
    &lt;div class="collapsible-header">&lt;i class="material-icons">place&lt;/i>Second&lt;/div>
  &lt;/li>
        </code></pre>
      </div>

      <div id="options" class="scrollspy section">
        <h3 class="header">Options</h3>
        <span>You can customize the behavior of each collapsible using these options. For example, you can call a custom function
          to run when a collapsbile is opened or closed. The function passes the
          <span class="language-markup">li</span> element that was opened or closed as an argument.</span>

        <table class="striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Default</th>
              <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>accordion</td>
              <td>Boolean</td>
              <td>true</td>
              <td>If accordion versus collapsible.</td>
            </tr>
            <tr>
              <td>onOpenStart</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback function called before collapsible is opened.</td>
            </tr>
            <tr>
              <td>onOpenEnd</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback function called after collapsible is opened.</td>
            </tr>
            <tr>
              <td>onCloseStart</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback function called before collapsible is closed.</td>
            </tr>
            <tr>
              <td>onCloseEnd</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback function called after collapsible is closed.</td>
            </tr>
            <tr>
              <td>inDuration</td>
              <td>Number</td>
              <td>300</td>
              <td>Transition in duration in milliseconds.</td>
            </tr>
            <tr>
              <td>outDuration</td>
              <td>Number</td>
              <td>300</td>
              <td>Transition out duration in milliseconds..</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="methods" class="scrollspy section">
        <h3 class="header">Methods</h3>
        <span>You can programmatically open and close collapsibles through these methods. The second parameter is the 0-based index
          of the collapsible you want to open.</span>

        <blockquote>
          <p>Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin
            instance like this: </p>
          <pre><code class="language-javascript col s12">
  var instance = M.Collapsible.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.collapsible').collapsible('methodName');
    $('.collapsible').collapsible('methodName', paramName);
  */
        </code></pre>
        </blockquote>
        <h5 class="method-header">
          .open();
        </h5>
        <p>Open collapsible section.</p>
        <h6>Arguments</h6>
        <p>
          <b>Integer:</b> Nth section to open.</p>
        <pre><code class="language-javascript col s12">
instance.open(3);
      </code></pre>
        <br>

        <h5 class="method-header">
          .close();
        </h5>
        <p>Close collapsible section.</p>
        <h6>Arguments</h6>
        <p>
          <b>Integer:</b> Nth section to close.</p>
        <pre><code class="language-javascript col s12">
instance.close(3);
      </code></pre>
        <br>

        <h5 class="method-header">
          .destroy();
        </h5>
        <p>Destroy plugin instance and teardown</p>
        <pre><code class="language-javascript col s12">
instance.destroy();
      </code></pre>
        <br>
        <br>

        <div id="properties" class="scrollspy section">
          <h3 class="header">Properties</h3>
          <table class="striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Description</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>el</td>
                <td>Element</td>
                <td>The DOM element the plugin was initialized with.</td>
              </tr>
              <tr>
                <td>options</td>
                <td>Object</td>
                <td>The options the instance was initialized with.</td>
              </tr>
            </tbody>
          </table>
        </div>
        <br>
        <br>

        <h3 class="header">Collapsible Types</h3>
        <span>There are two ways a collapsible can behave. It can either allow multiple sections to stay open, or it can only allow
          one section to stay open at a time, which is called an accordion. See below for a demo of each type.</span>
      </div>

      <div id="accordion" class="section scrollspy">
        <div class="row">
          <div class="col s12 m3">
            <h5 class="light">Accordion</h5>
          </div>
          <div class="col s12 m9">
            <ul class="collapsible">
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">filter_drama</i>First</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. </span>
                </div>
              </li>
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">place</i>Second</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">whatshot</i>Third</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col s12 m9 offset-m3">
            <span>This is default behavior.</span>
          </div>
        </div>
      </div>
      <div id="expandable" class="section scrollspy">
        <div class="row">
          <div class="col s12 m3">
            <h5 class="light">Expandable</h5>
          </div>
          <div class="col s12 m9">
            <ul class="collapsible expandable">
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">filter_drama</i>First</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">place</i>Second</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">whatshot</i>Third</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col s12 m9 offset-m3">
            <pre><code class="language-markup">
  &lt;ul class="collapsible expandable">
            </code></pre>
            <pre><code class="language-javascript">
var elem = document.querySelector('.collapsible.expandable');
var instance = M.Collapsible.init(elem, {
  accordion: false
});
            </code></pre>
          </div>
        </div>
      </div>

      <div id="popout" class="section scrollspy">
        <div class="row">
          <div class="col s12 m3">
            <h5 class="light">Popout</h5>
          </div>
          <div class="col s12 m9">
            <ul class="collapsible popout">
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">filter_drama</i>First</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">place</i>Second</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
              <li>
                <div class="collapsible-header">
                  <i class="material-icons">whatshot</i>Third</div>
                <div class="collapsible-body">
                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat.</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col s12 m9 offset-m3">
            <pre><code class="language-markup">
  &lt;ul class="collapsible popout">
            </code></pre>
          </div>
        </div>
      </div>

    </div>


    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIK27J&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li>
              <a href="#introduction">Introduction</a>
            </li>
            <li>
              <a href="#intialization">Initialization</a>
            </li>
            <li>
              <a href="#options">Options</a>
            </li>
            <li>
              <a href="#methods">Methods</a>
            </li>
            <li>
              <a href="#properties">Properties</a>
            </li>
            <li>
              <a href="#accordion">Accordion</a>
            </li>
            <li>
              <a href="#expandable">Expandable</a>
            </li>
            <li>
              <a href="#popout">Popout</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>